<template>
    <div class="page">
        <div class="main-title">
            <span>我的账单</span>
        </div>

        <div class="table-class">
            <div :class="{ 'active-tab': activeTab == 0, 'noactive-tab': activeTab == 1 }" @click="openTab(0)">授信支付账单</div>
            <div :class="{ 'active-tab': activeTab == 1, 'noactive-tab': activeTab == 0 }" @click="openTab(1)">账期支付账单</div>
        </div>

        <div class="page-ctx" v-if="activeTab == 0">
            <div class="center">
                <div class="tab-box">
                    <div class="tab-list">
                        <div v-for="(item, index) in tabList" :key="index" class="tab-item"
                            :class="tabSelect.value == item.value ? 'active' : ''" @click="do_toggle_tab(item)">
                            {{ item.title }}
                            <span class="number" v-if="tabSelect.num">{{ tabSelect.num }}</span>
                        </div>
                    </div>
                    <div style="display:flex">
                        <el-date-picker class="width139" v-model="value1" type="date" value-format="yyyy-MM-dd"  @change="setView"
                            placeholder="交易日期">
                        </el-date-picker>
                        <!-- <el-select v-model="value" class="width139" placeholder="状态">
                            <el-option v-for="item in tabList" :key="item.value" :label="item.title"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
                    </div>
                </div>

                <div class="table-div">
                    <el-table :data="listData" :header-cell-style="{ background: '#F5F5F5' }">
                        <el-table-column prop="id" label="序号"></el-table-column>
                        <el-table-column prop="limitOrderId" label="订单编号"></el-table-column>
                        <el-table-column prop="actualPrice" label="订单金额"></el-table-column>
                        <el-table-column prop="payTypeStr" label="支付方式"></el-table-column>
                        <el-table-column prop="statusStr" label="状态"></el-table-column>
                        <el-table-column prop="settlementAmount" label="结款金额"></el-table-column>
                        <el-table-column prop="surplusAmount" label="未结款金额"></el-table-column>
                        <el-table-column prop="order.payTime" label="结款时间"></el-table-column>
                        <el-table-column prop="createTime" label="交易时间"></el-table-column>
                    </el-table>
                </div>
                <div class="pagi-box">
                    <el-pagination @current-change="on_current_change_allow" background :current-page.sync="currentPage"
                        :page-size="pageSize" layout="total, prev, pager, next" :total="totalCount"></el-pagination>
                </div>

            </div>
        </div>

        <div class="page-ctx" v-if="activeTab == 1">
            <div class="center">
                <div class="tab-box">
                    <div class="tab-list">
                        <div v-for="(item, index) in tabList" :key="index" class="tab-item"
                            :class="tabSelect.value == item.value ? 'active' : ''" @click="do_toggle_tab(item)">
                            {{ item.title }}
                            <span class="number" v-if="item.num">{{ item.num }}</span>
                        </div>
                    </div>
                    <div style="display:flex">
                        <el-date-picker class="width139" v-model="value1" type="date" value-format="yyyy-MM-dd"
                            placeholder="交易日期">
                        </el-date-picker>
                        <!-- <el-select v-model="value" class="width139" placeholder="状态">
                            <el-option v-for="item in tabList" :key="item.value" :label="item.title"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
                    </div>
                </div>

                <div class="table-div">
                    <el-table :data="listData" :header-cell-style="{ background: '#F5F5F5' }">
                        <el-table-column prop="id" label="序号"></el-table-column>
                        <el-table-column prop="limitOrderId" label="订单编号"></el-table-column>
                        <el-table-column prop="actualPrice" label="订单金额"></el-table-column>
                        <el-table-column prop="payTypeStr" label="支付方式"></el-table-column>
                        <el-table-column prop="statusStr" label="状态"></el-table-column>
                        <el-table-column prop="settlementAmount" label="结款金额"></el-table-column>
                        <el-table-column prop="surplusAmount" label="未结款金额"></el-table-column>
                        <el-table-column prop="order.payTime" label="结款时间"></el-table-column>
                        <el-table-column prop="createTime" label="交易时间"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    components: {
    },
    data() {
        return {
            tabSelect: {
                title: "全部",
                value: -1,
            },
            listData: [
                { date: 1, name: 1, address: 2 }
            ],
            activeTab: 0,
            pageSize: 20,
            currentPage: 1,
            totalCount: 1,
            value: '',
            value1: '',
            //状态 不传为全部 0待结算 1已结算 2部分结算

            statusMap:{
                0: '待结算',
                1: '已结算',
                2: '部分结算',
            },
            payTypeMap: {
              '0':'微信支付',
              '1':'支付宝支付',
              '2': '授信额度',
              '3': '账单周期',
              '4': "余额"
            },
        };
    },
    computed: {
        ...mapState([""]),

        tabList() {
            let list = [
                { value: -1, title: "全部", number_key: "orderNum", num:0 },
                { value: 0, title: "未结款", number_key: "orderNeedPay", num:0 },
                { value: 1, title: "已结款", number_key: "orderNeedDelivery", num:0 },
                { value: 2, title: "部分结款", number_key: "orderNeedShouhuo" , num:0},
            ];
            return list;
        },
    },
    created() {
        this.setView();
    },
    methods: {
        setView(){
            this.$httpApi('/api/v1/purchaser/limit/orderStatus/nums',{},'get').then(res => {
                this.tabList.forEach((item) => {
                    item.num = 0;
                switch(item.value){
                    case -1:
                      item.num = res.data.orderList;
                      break;
                    case 0:
                      item.num = res.data.waitPay;
                      break;
                    case 1:
                      item.num = res.data.pay;
                      break;
                    case 2:
                      item.num = res.data.partPay;
                      break;
                  }
                });
                console.log(res.data,'res.data')
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })
            this.$httpApi('/api/v1/purchaser/limit/order/list',{
                status: this.tabSelect.value == -1? null : this.tabSelect.value,
                searchTime: this.value1 == ''? null : this.value1,
            }).then(res => {
                res.rows.forEach(item => {
                    item.statusStr = this.statusMap[item.status];
                    item.payTypeStr = this.payTypeMap[item.order.payType];
                })
                this.listData= res.rows;
                this.totalCount = res.total;
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })
        },
        setPeriodView(){
            this.$httpApi('/api/v1/purchaser/period/orderStatus/nums',{},'get').then(res => {
                this.tabList.forEach((item) => {
                    item.num = 0;
                switch(item.value){
                    case -1:
                      item.num = res.data.orderList;
                      break;
                    case 0:
                      item.num = res.data.waitPay;
                      break;
                    case 1:
                      item.num = res.data.pay;
                      break;
                    case 2:
                      item.num = res.data.partPay;
                      break;
                  }
                });
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })

            this.$httpApi('/api/v1/purchaser/period/order/list',{
                status: this.tabSelect.value == -1? null : this.tabSelect.value,
                searchTime: this.value1 == ''? null : this.value1,
            }).then(res => {
                res.rows.forEach(item => {
                    item.statusStr = this.statusMap[item.status];
                    item.payTypeStr = this.payTypeMap[item.order.payType];
                })
                this.listData= res.rows;
                this.totalCount = res.total;
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })
        },
        openTab(val) {
            this.activeTab = val;
            this.tabSelect = this.tabList[0]
            if(this.activeTab == 0){
                this.setView();
            }else{
                this.setPeriodView();
            }
        },
        returnFunc() {
            return this.$router.go(-1);
        },
        on_current_change_allow(value) {
            this.pageSize = value
        },
        do_toggle_tab(item) { 
            this.tabSelect = item;
            if(this.activeTab == 0){
                this.setView();
            }else{
                this.setPeriodView();
            }
        }
    },
};
</script>

<style scoped lang="less">
.table-class {
    display: flex;
}

.active-tab {
    width: 134px;
    height: 36px;
    background: #EF1F1F;
    border-radius: 8px 8px 0px 0px;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 36px;
    margin-left: 10px;
    margin-top: 24px;
    cursor: pointer;
}

.noactive-tab {
    width: 134px;
    height: 36px;
    background: #DEDEDE;
    border-radius: 8px 8px 0px 0px;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-left: 10px;
    margin-top: 24px;
    line-height: 36px;
    cursor: pointer;
}

.pagi-box {
    margin-top: 30px;
    text-align: right;
}

.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            display: flex;
            align-items: center;
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #EF1F1F;
            color: #fff;
            background: #fff;
            color: #000000;
            font-size: 14px;
            // font-weight: bold;

            img {
                width: 20px;
            }

            .el-icon-circle-plus {
                font-size: 18px;
                color: #EF1F1F;
            }

            .add-text {
                margin-left: 5px;
            }
        }
    }

    .main-content {
        height: 124px;
        background-color: #fff;
        border-top: 1px solid #EAEEF1;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .page-ctx {

        padding: 32px 32px 55px 32px;
        background: #fff;
        min-height: 500px;
    }

    .width139 {
        width: 139px;
        margin-left: 20px;
    }

    .tab-box {
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        // border: 1px solid #cccccc;

        .tab-list {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #7d7d7d;

            .tab-item {
                position: relative;
                // min-width: 96px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                height: 48px;
                line-height: 48px;
                cursor: pointer;
                margin-right: 20px;

                .number {
                    color: #333333;
                }

                &.active {
                    // background: #009F39;
                    // color: #fff;
                    // font-weight: bold;
                    // color: #009f39;
                    font-weight: 500;
                    color: #EF1F1F;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 3px;
                        background: #EF1F1F;
                    }

                    .number {
                        color: #EF1F1F;
                    }
                }
            }
        }
    }

    .table-div {
        margin-top: 24px;
    }
}
</style>